React useFormStatus 进度计算器：实时进度估算，提升用户体验

在现代 Web 应用程序中，在表单提交期间为用户提供清晰即时的反馈对于积极的用户体验至关重要。一种有效的方法是实现实时进度计算器，让用户能够直观地确认其数据正在被处理。这不仅可以减轻用户的焦虑，还能提高参与度。React 的 `useFormStatus` hook 结合战略性的进度跟踪，使开发人员能够创建复杂且信息丰富的进度指示器。

理解 React useFormStatus

`useFormStatus` hook 是在 React 18 中引入的，它提供了关于 `

import React from 'react';
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending } = useFormStatus();

  async function handleSubmit(formData: FormData) {
    'use server';
    // 模拟一个缓慢的服务器操作
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('表单已成功提交！');
  }

  return (
    
      
      
        {pending ? '正在提交...' : '提交'}
      
    
  );
}

export default MyForm;

在这个简化的示例中，`useFormStatus` 用于在表单处于 `pending` 状态时禁用提交按钮并显示“正在提交...”消息。这为用户提供了基本的反馈。

实现实时进度计算器

要创建更复杂的进度指示器，我们需要跟踪表单提交过程的进度。这通常涉及将提交分解为多个阶段或步骤。虽然 `useFormStatus` 本身不提供细粒度的进度更新，但我们可以将其与自定义逻辑结合来实现这一点。

示例场景：上传文件

考虑上传文件的场景。提交过程可能涉及以下步骤：

1. 验证文件。
2. 调整图片大小（如果适用）。
3. 将文件上传到服务器。
4. 更新数据库。

我们可以根据这些步骤的完成情况来估算进度。

带有进度跟踪的代码实现

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function FileUploadForm() {
  const { pending } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    // 模拟验证 (20%)
    await simulateProgress(20, setProgress);
    console.log('文件验证完成');

    // 模拟调整大小 (30%)
    await simulateProgress(30, setProgress);
    console.log('文件调整大小完成');

    // 模拟上传 (40%)
    await simulateProgress(40, setProgress);
    console.log('文件上传完成');

    // 模拟数据库更新 (10%)
    await simulateProgress(10, setProgress);
    console.log('数据库已更新');

    console.log('文件已成功上传！');
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? '正在上传...' : '上传'}
      
      {pending && (
        

          进度: {progress}%
          
        
      )}
    
  );
}

export default FileUploadForm;

解释：

• 我们使用 `useState` hook 来管理 `progress` 状态，初始值为 0。
• `handleSubmit` 函数现在模拟文件上传过程的不同阶段，每个阶段都使用 `simulateProgress` 函数更新 `progress` 状态。
• `simulateProgress` 函数使用 `setTimeout` 来模拟异步操作并逐步更新进度百分比。这为用户创建了进度的可视化表示。
• 当表单处于 `pending` 状态时，我们使用 HTML5 `` 元素显示一个进度条，该进度条反映当前的 `progress` 值。

自定义进度指示器

进度指示器的视觉表示可以通过多种方式进行自定义：

• 进度条样式： 使用 CSS 为 `` 元素设置样式，或使用 `
  ` 元素和 CSS 动画创建自定义进度条。考虑品牌颜色和样式，以匹配您应用程序的设计。
• 文本更新： 通过显示“正在验证文件…”，“正在调整图像大小…”等消息，并附带进度条，提供更具描述性的更新。
• 视觉反馈： 使用动画或图标进一步增强视觉反馈。加载旋转器或完成时的勾选标记动画可以改善用户体验。

错误和边缘情况处理

处理表单提交过程中的潜在错误至关重要。`useFormStatus` hook 提供了一个 `error` 属性，可用于向用户显示错误消息。

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function ErrorHandlingForm() {
  const { pending, error } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    try {
      // 模拟验证 (20%)
      await simulateProgress(20, setProgress);
      console.log('文件验证完成');

      // 模拟上传错误 (在 50% 之后)
      if (progress >= 50) {
        throw new Error('文件上传失败。');
      }

      // 模拟调整大小 (30%)
      await simulateProgress(30, setProgress);
      console.log('文件调整大小完成');

      // 模拟上传 (40%)
      await simulateProgress(40, setProgress);
      console.log('文件上传完成');

      // 模拟数据库更新 (10%)
      await simulateProgress(10, setProgress);
      console.log('数据库已更新');

      console.log('文件已成功上传！');
    } catch (err: any) {
      console.error('上传过程中出错：', err);
      // 适当地处理错误。
      throw err;
    }
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? '正在上传...' : '上传'}
      
      {pending && (
        

          进度: {progress}%
          
        
      )}
      {error && 
错误: {error.message}
}
    
  );
}

export default ErrorHandlingForm;

重要注意事项：

• 错误边界： 将您的表单包装在错误边界内，以优雅地处理意外错误。
• 用户友好的消息： 向用户显示清晰且信息丰富的错误消息，指导他们如何解决问题。避免使用技术术语，并侧重于可操作的建议。
• 回滚： 如果发生错误，请考虑实施回滚机制，以撤销在提交过程中所做的任何更改。

可访问性考虑

确保您的进度指示器对所有用户（包括残障人士）都可访问：

• ARIA 属性： 使用 `aria-valuenow`、`aria-valuemin` 和 `aria-valuemax` 等 ARIA 属性，为屏幕阅读器提供关于进度条的语义信息。
• 足够的可视对比度： 确保进度条具有足够的可视对比度，以适应视力障碍的用户。
• 键盘导航： 确保表单及其元素可以使用键盘进行导航。
• 焦点管理： 适当地管理焦点，尤其是在显示错误消息或完成提交过程时。

实际示例和用例

在各种场景中，使用实时进度计算器都非常有益：

• 大型文件上传： 为用户提供上传大型文件（如视频或高分辨率图像）的进度反馈。
• 复杂数据处理： 通知用户复杂数据处理操作（如生成报告或分析大型数据集）的进度。
• 多步表单： 指导用户完成多步表单，显示在每个步骤中取得的进度。
• 电子商务结账： 在结账过程中提供反馈，让用户放心其订单正在处理中。
• 软件安装： 显示软件安装或更新的进度。

例如，云存储服务可能会使用进度条来指示文件的上传状态，而在线图片编辑器可能会使用它来显示应用滤镜或效果的进度。

实现进度计算器的最佳实践

• 准确估算进度： 努力尽可能准确地估算进度，为用户提供现实的反馈。过高地估算进度可能会导致过程比预期花费更长时间时感到沮丧。
• 提供细粒度更新： 为进度指示器提供频繁而细粒度的更新，让用户感受到持续的进展。
• 避免进度跳跃： 避免进度突然跳跃，因为这可能会让用户感到不适和困惑。平滑的过渡是可取的。
• 优化性能： 优化进度计算逻辑的性能，避免影响应用程序的整体性能。
• 彻底测试： 在各种条件下，包括不同的网络速度和文件大小，彻底测试进度指示器，以确保它提供准确可靠的反馈。

useFormStatus 进度跟踪的替代方案

虽然 `useFormStatus` 对于基本的表单提交跟踪非常出色，但可以使用其他方法来实现更细粒度的进度控制：

• 自定义 Promise Hook： 创建自定义 React hook，它们封装异步操作（如文件上传）并使用 Promises 来跟踪其进度。
• Web Workers： 将计算密集型任务（如图像调整大小）卸载到 Web Workers，以防止阻塞主线程并提供更平滑的进度更新。
• 服务器发送事件 (SSE)： 使用 SSE 从服务器接收有关后台任务进度的实时更新。
• WebSockets： 使用 WebSockets 与服务器进行双向通信，从而实现更复杂的进度跟踪和反馈机制。

结论

使用 React 的 `useFormStatus` hook 实现实时进度计算器是在表单提交期间增强用户体验的宝贵技术。通过提供清晰即时的反馈，您可以减轻用户焦虑，提高参与度，并建立信任。在实现进度指示器时，请记住考虑可访问性、错误处理和性能优化。虽然 `useFormStatus` 提供了一种简化的方法，但根据您的应用程序的复杂性探索替代的进度跟踪方法可能会带来更好的结果。通过仔细考虑用户的需求和您应用程序的具体要求，您可以创建既信息丰富又引人入胜的进度指示器。